<template>
    <div id="order-address">

        <div style="padding: 10px;">
            <div style="display: flex; align-items: center;">
                <img :src="goods.imgs && goods.imgs.length > 0 ? goods.imgs[0]:''"
                    style="width: 100px; height: 100px;" />
                <div>
                    <div style="font-size: 16px; padding: 5px 0">{{goods.name}}</div>
                    <div style="font-size: 18px; color: #ff4949"><span style="font-size: 12px;">￥</span>{{goods.price}}
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 8px; background: #f4f4f4"></div>
        <div>
            <van-cell-group title="补充商品信息">
                <div
                    style="display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; color: #323233">
                    <div>购买数量</div>
                    <van-stepper :min="1" v-model="buyCount" />
                </div>
            </van-cell-group>
        </div>
        <div style="height: 8px; background: #f4f4f4"></div>
        <div>
            <van-cell-group title="填写收货信息">
                <van-field label="收货人" v-model="orderInfo.receiver" placeholder="填写收货人" />
                <van-field label="收货电话" v-model="orderInfo.receiverMobile" required placeholder="填写收货电话" />
                <van-field readonly clickable label="地区" :value="orderInfo.area" placeholder="选择省/市/区"
                    @click="showPicker = true" />
                <van-field label="详细地址" v-model="orderInfo.address" placeholder="填写详细地址" />
                <van-field label="备注" v-model="orderInfo.mark" placeholder="备注" />
            </van-cell-group>
        </div>
        <div style="padding: 16px; color: #969799">选择支付方式</div>
        <div class="pay-style-wrap">
            <div class="pay-style-img-wrap" :class="{'payment-checked': payment === 0}" @click="choosePayment(0)">
                <img src="../../assets/images/alipay.png" style="width: 100%" />
            </div>
            <div class="pay-style-img-wrap" :class="{'payment-checked': payment === 1}" @click="choosePayment(1)">
                <img src="../../assets/images/wechatpay.png" style="width: 100%" />
            </div>
        </div>
        <div
            style="width: 90%; margin: 20px auto; height: 42px; line-height: 42px; text-align: center; background: #ff4949; color: #FFF">
            <div @click="submit">提交订单(￥{{buyCount * goods.price}})</div>
        </div>
        <van-popup v-model="showPicker" position="bottom">
            <van-area :area-list="areaList" @confirm="areaConfirm" />
        </van-popup>
    </div>
</template>
<script>
    import R from '@/api/RequestUtil'
    import * as ApiServer from '@/api/api'
    import Util from '@/tools/utils'
    import AreaList from '@/constant/area'
    import { CellGroup, Field, Area, Popup, Stepper, Cell, Button, Image, Toast } from 'vant'
    export default {
        name: 'order-address',
        components: {
            [Field.name]: Field,
            [CellGroup.name]: CellGroup,
            [Area.name]: Area,
            [Popup.name]: Popup,
            [Stepper.name]: Stepper,
            [Cell.name]: Cell,
            [Button.name]: Button,
        },
        data: function () {
            return {
                showPicker: false,
                goods: {},
                orderInfo: {
                    receiver: null,
                    receiverMobile: null,
                    area: null,
                    address: null,
                    mark: null
                },
                areaList: AreaList,
                value: '',
                buyCount: 1,
                payment: 0
            }
        },
        methods: {
            choosePayment: function (payment) {
                this.payment = payment
            },
            submit: function () {
                // api / v1 / app / pay
                // sku, name, price  { sku: '1', name: '2', price: '3' }
                let data = { payment: this.payment, amount: this.goods.price * this.buyCount, name: this.goods.name }
                ApiServer.pay(data)
                    .then(res => {
                        console.log('res ==>', res)
                        if (this.payment == 0) {
                            var div = document.createElement('div')
                            div.innerHTML = res.data
                            document.body.appendChild(div)
                            document.forms.punchout_form.submit()
                        }
                        if (1 == this.payment) {
                            window.location.href = res.result
                        }
                        this.$router.push('pay/result')
                    })

                // R.post('pay/do', { payment: this.payment, amount: this.goods.price * this.buyCount }, data => {
                //     if (0 == this.payment) {
                //         var div = document.createElement('div')
                //         div.innerHTML = data.result
                //         document.body.appendChild(div)
                //         document.forms.punchout_form.submit()
                //     }
                //     if (1 == this.payment) {
                //         window.location.href = data.result
                //     }
                //     this.$router.push('pay/result')
                // })

            },
            areaConfirm: function (val) {
                var s = ''
                for (var i = 0; i < val.length; i++) {
                    s += val[i].name + ' '
                }
                this.showPicker = false
                this.orderInfo.area = s
            }
        },
        mounted: function () {
            const sku = this.$route.params.sku
            if (sku) {
                var goods = Util.getSku(sku)
                this.goods = goods
            }
        }
    }
</script>
<style scoped>
    .pay-style-wrap {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }

    .pay-style-img-wrap {
        width: 45%;
        border: 1px solid #ccc;
        border-radius: 4px;
        overflow: hidden
    }

    .payment-checked {
        border: 1px solid #ff4949;
    }
</style>